<template>
	<div class="flex-page-wrapper" @click="closeMenu">
		<uni-nav-bar statusBar color="#fff" backgroundColor="#784DFF" title="玩转外滩">
		</uni-nav-bar>
		<view class="flex-page">
			<welcome></welcome>
			<view class="nav">
				<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-bg.png" mode="widthFix"></image>
				<image class="logo" src="https://static.inclusionconf.com/static/images/logo.png?t=1" mode="widthFix"></image>
				<div class="nav-content">
					<div class="nav-top">
						<div class="nav-left">
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new1.png" mode="widthFix" @click="link(1)"></image>
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new2.png" mode="widthFix" @click="link(2)"></image>
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new3.png" mode="widthFix" @click="link(3)"></image>
						</div>
						<div class="nav-right">
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new4.png" mode="widthFix" @click="link(4)"></image>
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new5.png" mode="widthFix" @click="link(5)"></image>
							<image class="nav-bg" src="https://static.inclusionconf.com/static/images/chat/nav-item-new6.png" mode="widthFix" @click="link(6)"></image>
						</div>
					</div>
					<div class="nav-bottom">
						<image class="nav-bg" @click="moreFn" src="https://static.inclusionconf.com/static/images/chat/nav-item-new7.png" mode="widthFix"></image>
					</div>
				</div>
			</view>
		</view>
		<foot-wap :value="1"></foot-wap>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import welcome from '@/components/welcome/index.vue'
	
	export default {
		onShareTimeline(res) {
			return {
				title: 'Inclusion外滩大会',
				desc: 'Inclusion外滩大会是在上海举办的全球高级别金融科技和前沿科技大会，致力于搭建全球科技、金融和产业间的高规格开放对话平台，展现AI时代全球科技创新趋势，助力上海打造国际金融中心和科技创新中心。',
				path: '/pages/nav/index',
				imageUrl: 'https://static.inclusionconf.com/static/images/chat/foot-icon-new2.png',
				success: () => {}
			}
		},
		onShareAppMessage(res) {
			return {
				title: 'Inclusion外滩大会',
				desc: 'Inclusion外滩大会是在上海举办的全球高级别金融科技和前沿科技大会，致力于搭建全球科技、金融和产业间的高规格开放对话平台，展现AI时代全球科技创新趋势，助力上海打造国际金融中心和科技创新中心。',
				path: '/pages/nav/index',
				imageUrl: 'https://static.inclusionconf.com/static/images/chat/foot-icon-new2.png',
				success: () => {}
			}
		},
		props: {
			welcome
		},
		data() {
			return {
				url: '',
				showTips: false
			}
		},
		onShow() {
			this.showTips = true
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			moreFn() {
				uni.navigateTo({
					url: '/pages/special/index'
				})
			},
			link(v) {
				if (v == 1) {
					uni.navigateTo({
						url: 'plugin://thePlugin/chat-page'
					})
				} else if (v == 2) {
					uni.navigateTo({
						url: '/pages/xingcheng/helperSec'
					})
				} else if (v == 3) {
					// #ifdef MP-ALIPAY
						my.navigateToMiniProgram({
							appId: '2021005175643986'
						})
					// #endif
				} else if (v == 5) {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + encodeURIComponent('https://render.alipay.com/p/yuyan/180020010001277655/clocking-inclusion-index.html?caprMode=sync&activityCode=HD20250808000001MKK999&solutionConfigCode=FA20250808000001OUL001&transparentTitle=auto')
					})
				} else if (v == 6) {
					uni.navigateTo({
						url: '/pages/innerTips/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex-page {
		margin-top: -1px;
		overflow: auto;
	}

	.nav {
		position: relative;
		margin-top: -196rpx;

		.logo {
			position: absolute;
			left: 22px;
			top: 236rpx;
			width: 85px;
		}

		.nav-bg {
			width: 100%;
		}

		.nav-content {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			top: 556rpx;

			.nav-top {
				width: 694rpx;
				display: flex;
				justify-content: space-between;

				.nav-left {
					flex: 0 0 412rpx;

					.nav-bg {
						width: 100%;
						margin-bottom: 12rpx;
					}
				}
				
				.nav-right {
					flex: 0 0 272rpx;

					.nav-bg {
						width: 100%;
						margin-bottom: 12rpx;
					}
				}
			}

			.nav-bottom {
				width: 694rpx;
				display: flex;

				.nav-bg {
					width: 100%;
				}
			}
		}
	}
</style>